<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>更新密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/myconfig/layui/css/layui.css}" media="all">
</head>
<body>
<!--    更新密码-->
<form class="layui-form" style="margin: 25px">
    <input name="userId" hidden th:value="${userId}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">请输入密码</label>
            <div class="layui-input-inline ">
                <input type="password" name="userPass" autocompvare="off" placeholder="请输入密码" class="layui-input"
                       required lay-verify="pass|confirmPass">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">请确认密码</label>
            <div class="layui-input-inline ">
                <input type="password" name="confirmPass" autocompvare="off" placeholder="请确认密码" class="layui-input"
                       required id="confirmPass" lay-verify="pass">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updatePass">更新密码</button>
            <button class="layui-btn layui-btn-primary closeLayer">取消</button>
        </div>
    </div>
</form>

<script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" charset="utf-8"></script>
<!-- 获取根路径 -->
<script th:replace="fragscript :: basePath"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['form', 'jquery'], function () {
        var layer = parent.layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var index = layer.getFrameIndex(window.name);//弹出层窗口index
        var updatePassUrl = '/user/updatePass';
        //自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            confirmPass: function (value, item) {
                if (value != $("#confirmPass").val()) {
                    return '两次密码输入不一致!';
                }
            }
        });

        form.on('submit(updatePass)', function (data) {
            $.ajax({
                url: basePath + updatePassUrl,
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: function (result) {
                    layer.msg(result.message);
                    if (result.code == 0) {
                        layer.close(index);
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $(".closeLayer").click(function () {
            layer.close(index);
        });
    })
</script>
</body>
</html>